<script setup>
	import {ref} from "vue";
	const searchVal =ref("")
	const handleSearch=()=>{console.log("搜索");}

	const iconClick = () => {
	  console.log('图标被点击')
	}
	import {useNavBarStyle} from "@/utils/system.js"
	const {headHeight}=useNavBarStyle();

	// 针对小程序穿透失败 - 修复语法
	defineOptions({
		options: {styleIsolation: 'shared'}
	})
</script>

<template>
	<view class="search-wrap">
		<view class="fixed">
			<!--  -->
			<uni-easyinput class="input" suffixIcon="search"
			v-model.trim="searchVal"  placeholder="请输入搜索的产品..." 
			@iconClick="iconClick" @confirm="handleSearch">
			</uni-easyinput>
		</view>
		<!--占位符  -->
		<view class="block"></view>
	</view>
</template>

<style lang="scss" scoped>
	.search-wrap{
		.fixed{
			background:$uni-color-primary;padding:10rpx 32rpx;
			//想要与粘顶 固定定位
			position:fixed;width:100%;top:v-bind(headHeight);height: 70rpx;z-index: 999;
			// 针对小程序的样式穿透
			:deep(.uni-easyinput__content){border-radius: 50px !important;}
			:deep(.is-input-border){border-radius: 50px !important;border-color: $uni-color-primary !important;}
			:deep(input){border-radius: 50px !important;}
		}
	}
	.block{height:90rpx;}
</style>